<template>
	<view class="order-detail">
		<view class="order-detail-header">
			<basic-nav-bar 
				:backgroundColor="navColor"
				color="#fff"
				:statusBar="true"
				:border="false" 
				:fixed="true"
				left-icon="arrowleft" 
				title="订单详情"/>	
			<!-- 头部状态 -->
			<orderHeader v-if="orderInfo.orderNo" :orderInfo="orderInfo" @showCostDetail="showCostDetail"/>			
		</view>	
		<view v-if="orderInfo.orderNo" class="order-detail-content">
			<!-- 订单取消&退款状态说明 -->
			<orderStatusDesc :orderInfo="orderInfo" @showRefundDetail="showRefundDetail" />
			<!-- 入园凭证 -->
			<orderCode :orderNo="orderNo" />
			<!-- 导领信息 -->
			<!-- <orderGuide :guide="voucherInfo.guide" /> -->
			<!-- 司机信息 -->
			<!-- <orderDriver :driver="voucherInfo.driver" /> -->
			<!-- 司机&导领信息 -->
			<!-- <orderDriverGuide :driverAndGuide="voucherInfo.driverAndGuide " /> -->
			<!-- 4个品类的商品信息 -->
			<orderProduct :orderInfo="orderInfo" />
			<!-- 联系人信息 -->
			<orderPerson v-if="orderInfo.contact" :persons="[orderInfo.contact]" category="联系人"/>
			<!-- 出行人信息 -->
			<orderPerson :persons="orderInfo.passengers" category="出行人" />
			<!-- 接送信息 -->
		    <!-- <orderPickUp :orderInfo="orderInfo" /> -->
			<!-- 下单信息 -->
			<card title="下单信息"> 
				<view class="content">
					<basic-label-value label="下单时间" :value="orderInfo.createdAt||'-'" notColon labelWidth="200rpx" color="#999999" size="28rpx" valueColor="#333333" />
					<basic-label-value label="支付时间" v-if="orderInfo.payTime" :value="orderInfo.orderStatus !== 1001 ? (orderInfo.payTime || '-') : '-'" notColon labelWidth="200rpx" color="#999999" size="28rpx" valueColor="#333333" />			
				</view>
			</card>
			<!-- 退改政策 -->
			<card title="退改政策" v-if="orderInfo.cancalRules && orderInfo.cancalRules.length"> 
				<view class="cancalRules">
					<view class="" v-for="str in orderInfo.cancalRules" :key="str" >
						{{str}}
					</view>
					<view class="" v-if="orderInfo.refundPolicy">
						{{orderInfo.refundPolicy}}
					</view>
				</view>
			</card>
			<!-- 其他信息 -->	
			<orderOtherInfo :orderInfo="orderInfo" />	
		</view>
		<!-- 退款明细 -->
		<uni-popup ref="refundInfo" type="bottom" >
			<refund-info :refundList="refundList" @close="$refs.refundInfo.close()"></refund-info>
		</uni-popup>
		<!-- 交易明细 -->
		<uni-popup ref="costDetail" type="bottom" >
			<costDetail :orderInfo="orderInfo" @close="$refs.costDetail.close()"></costDetail>
		</uni-popup>
		<order-bottom-bar 
			:orderInfo="actionsData" 
			@showRefundDetail="showRefundDetail" 
			@refreshOrderInfo="refreshOrderInfo" 
		/>	
	</view>
</template>
<script>
import sdk from 'sdk'
import store from '@/store'
import storage from 'utils/helper/storage'
import { getOrderDetail, getRefundList } from 'api'
import {decodeQueryObject} from 'utils/helper/query'
import { throttle } from "utils/helper/throttle"
import refundInfo from '@/components/business/refund-info'
import costDetail from '../../components/cost-detail'
import card from '../../components/card'
// import components from './components/index.js'
import etui from './components/etui'
import orderBottomBar from './components/order-bottom-bar'
import orderCode from './components/order-code'
import orderHeader from './components/order-header'
import orderPerson from './components/order-person'
import orderPickUp from './components/order-pick-up'
import orderProduct from './components/order-product'
import orderOtherInfo from './components/order-other-info'
import orderStatusDesc from './components/order-status-desc'
export default {
	name: 'order-detail',
	components: {
		etui,orderBottomBar,orderCode,orderHeader,orderPerson,orderPickUp,orderProduct,
		// ...components,
		refundInfo,
		costDetail,
		card,
		orderOtherInfo,
		orderStatusDesc
	},
	data() {
		return {
			orderNo: '278524481373797',
			orderInfo: {},
			voucherInfo: {},
			navColor:'inherit',
			actionsData: {},
			refundList: [], // 退款信息
		}
	},
	mounted() {	
	},
	onLoad(query){
		const options = decodeQueryObject(query)
		const { orderNo, mToken } = options
		if(mToken) store.commit('SAVE_TOKEN', { token: mToken })		
		orderNo && (this.orderNo = orderNo)
	},
	onShow(){
		this.getDetail()
	},
	onPageScroll(e) {
			if(e.scrollTop>10) this.navColor='#26C4CC'
			else this.navColor='inherit'
	},
	methods: {
		getDetail() {
			getOrderDetail({ orderNo: this.orderNo }).then(res => {
				this.orderInfo = res.result
				const {orderStatus, payExpireTime,showPaying,showCancel,showVenue,showRefund,orderNo } = this.orderInfo
				this.actionsData = {orderStatus, payExpireTime,showPaying,showCancel,showVenue,showRefund,orderNo}
			})
		},
		refreshOrderInfo() {
			this.getDetail()
		},
		// 显示退款明细
		showRefundDetail() {
			// TODO 错误提示
			sdk.showLoading({mask: true})
			getRefundList({orderNo: this.orderNo})
			.then(res => {
				if (res && res.result && res.result.length) {
					this.refundList = res.result || [];
					this.$refs.costDetail.close()
					this.$refs.refundInfo.open()

					sdk.hideLoading()
				} else {
					sdk.showToast({
						icon: 'none',
						title: '暂无退款信息'
					})
				}
			})
			.catch(_ => {
				sdk.hideLoading()
			})
		},
		// 显示交易明细
		showCostDetail() {
			this.$refs.costDetail.open()
			this.$refs.refundInfo.close()
		},
	}
}
</script>
<style lang="less">
.order-detail{
	background: #F2F2F2;
	height: 100%;
	padding-bottom: 100rpx;
	.order-detail-header {		
		width: 750rpx;
		background: linear-gradient(135deg, #71CACF 0%, #26C4CC 100%);
		box-sizing: border-box;
	}
	.order-detail-content{
	    background: #F2F2F2;
	}
	.cancalRules{		
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
	}
}
</style>